import React from "react";
import {Alert, Image, ScrollView, Text, TextInput, TouchableOpacity, View} from "react-native";
import chjStyle from "../../CustomStyle";
import Util from "../Util";
import Register from "./Register";
import Password from "../../page/mine/Password";
import Toast from "react-native-root-toast";
import {Actions} from "react-native-router-flux";
import {connect} from "react-redux";
import * as MineAction from "../../redux/action/Mine";

class Login extends React.Component {
    // 构造函数，可执行初始化操作
    constructor(props) {
        super(props);
        // 在ES6，在构造函数里初始化state
        this.state = {
            phoneNumber: '',
            password: ''
        };
    }

    // 组件被加载时
    componentDidMount() {

    }

    // 组件即将被卸载时
    componentWillUnmount() {
    }

    // 组件被渲染时
    render() {
        return (
            <View style={chjStyle.mainContainer}>
                <ScrollView
                    style={chjStyle.recordContainer}>

                    <View style={[chjStyle.textItem, {height: chjStyle.getActualSizeInVertical(256)}]}>
                        <Image
                            style={{
                                position: 'absolute',
                                resizeMode: 'contain',
                                width: chjStyle.getActualSizeInHorizontal(375),
                                left: chjStyle.getActualSizeInHorizontal(187.5),
                                top: chjStyle.getActualSizeInVertical(50),
                            }}
                            source={require('../../../img/HeaderLogo.png')}/>
                    </View>


                    <View
                        style={[chjStyle.textItem]}>
                        <TextInput
                            placeholder="请输入手机号码"
                            ref='txtInputPhoneNumber'
                            autoCapitalize={this.props.autoCapitalize}
                            keyboardType='numeric'
                            maxLength={11}
                            onChangeText={this.onInputPhoneNumberChangeText.bind(this)}
                            underlineColorAndroid={'#00000000'}
                            style={[chjStyle.baseText, {
                                position: 'absolute',
                                color: '#303030',
                                textAlign: 'center',
                                backgroundColor: 'rgba(0, 0, 0, 0)',
                                textAlignVertical: 'center',
                                height: chjStyle.getActualSizeInVertical(128),
                                fontSize: chjStyle.getActualFontSize(30),
                                right: chjStyle.getActualSizeInHorizontal(30),
                                width: chjStyle.getActualSizeInHorizontal(690),
                            }]}>
                        </TextInput>
                    </View>


                    <View
                        style={[chjStyle.textItem]}>
                        <TextInput
                            placeholder="请输入密码"
                            ref='txtInputPassWord'
                            secureTextEntry={true}
                            autoCapitalize={this.props.autoCapitalize}
                            onChangeText={this.onInputPassWordChangeText.bind(this)}
                            underlineColorAndroid={'#00000000'}
                            style={[chjStyle.baseText, {
                                position: 'absolute',
                                color: '#303030',
                                textAlign: 'center',
                                backgroundColor: 'rgba(0, 0, 0, 0)',
                                textAlignVertical: 'center',
                                height: chjStyle.getActualSizeInVertical(128),
                                fontSize: chjStyle.getActualFontSize(30),
                                right: chjStyle.getActualSizeInHorizontal(30),
                                width: chjStyle.getActualSizeInHorizontal(690),
                            }]}>
                        </TextInput>
                    </View>

                    <View
                        style={{height: chjStyle.getActualSizeInVertical(140)}}>
                        <TouchableOpacity
                            onPress={() => this.onClickedLogin()}
                            style={{
                                position: 'absolute',
                                backgroundColor: '#ff971d',
                                borderRadius: 5,
                                borderTopWidth: 1,
                                borderLeftWidth: 1,
                                borderRightWidth: 1,
                                borderBottomWidth: 1,
                                borderColor: '#fff',
                                width: chjStyle.getActualSizeInHorizontal(700),
                                height: chjStyle.getActualSizeInVertical(100),
                                left: chjStyle.getActualSizeInHorizontal(25),
                                top: chjStyle.getActualSizeInVertical(40),
                            }}>
                            <Text style={[chjStyle.baseText, {
                                color: '#fff',
                                textAlign: 'center',
                                fontSize: chjStyle.getActualFontSize(40),
                                top: chjStyle.getActualSizeInVertical(24)
                            }]}>登录</Text>
                        </TouchableOpacity>
                    </View>

                    <View
                        style={{height: chjStyle.getActualSizeInVertical(140)}}>
                        <TouchableOpacity
                            onPress={() => this.onClickedRegister()}
                            style={{
                                position: 'absolute',
                                backgroundColor: '#ffc93f',
                                borderRadius: 5,
                                borderTopWidth: 1,
                                borderLeftWidth: 1,
                                borderRightWidth: 1,
                                borderBottomWidth: 1,
                                borderColor: '#fff',
                                width: chjStyle.getActualSizeInHorizontal(700),
                                height: chjStyle.getActualSizeInVertical(100),
                                left: chjStyle.getActualSizeInHorizontal(25),
                                top: chjStyle.getActualSizeInVertical(40),
                            }}>
                            <Text style={[chjStyle.baseText, {
                                color: '#fff',
                                textAlign: 'center',
                                fontSize: chjStyle.getActualFontSize(40),
                                top: chjStyle.getActualSizeInVertical(24)
                            }]}>注册</Text>
                        </TouchableOpacity>
                    </View>

                    <View
                        style={{height: chjStyle.getActualSizeInVertical(140)}}>
                        <TouchableOpacity
                            onPress={() => this.onClickedPassword()}
                            style={{
                                position: 'absolute',
                                backgroundColor: '#37a',
                                borderRadius: 5,
                                borderTopWidth: 1,
                                borderLeftWidth: 1,
                                borderRightWidth: 1,
                                borderBottomWidth: 1,
                                borderColor: '#fff',
                                width: chjStyle.getActualSizeInHorizontal(700),
                                height: chjStyle.getActualSizeInVertical(100),
                                left: chjStyle.getActualSizeInHorizontal(25),
                                top: chjStyle.getActualSizeInVertical(40),
                            }}>
                            <Text style={[chjStyle.baseText, {
                                color: '#fff',
                                textAlign: 'center',
                                fontSize: chjStyle.getActualFontSize(40),
                                top: chjStyle.getActualSizeInVertical(24)
                            }]}>修改密码</Text>
                        </TouchableOpacity>
                    </View>
                </ScrollView>

                <TouchableOpacity onPress={() => Actions.pop()}
                                  style={{
                                      backgroundColor: '#00000000',
                                      position: 'absolute',
                                      left: chjStyle.getActualSizeInVertical(20),
                                      top: chjStyle.getActualSizeInVertical(72),
                                      width: chjStyle.getActualSizeInHorizontal(72),
                                      height: chjStyle.getActualSizeInVertical(72)
                                  }}>
                    <Image source={require('../../../img/back.png')}
                           resizeMode='contain'
                           style={{
                               width: chjStyle.getActualSizeInHorizontal(72),
                               height: chjStyle.getActualSizeInVertical(72)
                           }}/>
                </TouchableOpacity>
            </View>
        );
    }

    onClickedLogin() {
        if (this.state.phoneNumber === '' || this.state.passWord === '') {
            Alert.alert("错误", "请输入完整信息");
            return;
        }

        const params = {
            phone: this.state.phoneNumber,
            password: this.state.password,
            userid: null,
            token: null,
        };
        Util.postServer('user/login', params, (result) => this.onLoginSuccess(result), (msg) => this.onLoginFailed(msg));
    }

    onLoginSuccess(result) {

        if (result.status === '0') {
            Toast.show("登录成功", {duration: Toast.durations.SHORT, position: Toast.positions.CENTER});
            const param = {
                id: result.data.user.userid,
                token: result.data.user.token,
                phone: result.data.user.phone,
                info: result.data.user,
            };
            this.props.updateUser(param);
            Util.storage.save({
                key: 'users',
                id: '1000',
                rawData: param,
                expires: null
            });
            Actions.pop({refresh: {}});
        }
        else {
            Alert.alert('错误:', result.msg);
        }

    }

    onClickedRegister() {
        Actions.Register({name: 'Register', component: Register});
    }

    onClickedPassword() {
        Actions.Password({name: 'Password', component: Password, phoneNumber: this.state.phoneNumber});
    }

    onLoginFailed(msg) {
        Toast.show(msg, {duration: Toast.durations.SHORT, position: Toast.positions.CENTER});
    }


    onInputPhoneNumberChangeText(value) {
        this.state.phoneNumber = value;
    }

    onInputPassWordChangeText(value) {
        this.state.password = value;
    }
}


const mapStateToProps = (state) => {
    const {userData} = state;
    return {
        userData: userData,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        updateUser: param => dispatch(MineAction.userData(param)),
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);
